<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        你的爱好的运动是<input type="checkbox" class="all">全选/不选（全选自动勾选）</br>
        <input type="checkbox" class="inp" value="足球">足球
        <input type="checkbox" class="inp" value="篮球">篮球
        <input type="checkbox" class="inp" value="羽毛球">羽毛球
        <input type="checkbox" class="inp" value="乒乓球">乒乓球</br>
        <button class="btn1">全选</button>
        <button class="btn2">全不选</button>
        <button class="btn3">反选</button>
        <button class="btn4">提交并打印</button>

        <ul>
            <li class="beijing">北京</li>
            <li>上海</li>
            <li>四川</li>
            <li>深圳</li>
        </ul>
        <button class="btn01">创建一个广州节点</button></br>
        <button class="btn02">将广州节点插入到北京前面</button></br>
        <button class="btn03">使用广州节点替换北京节点</button></br>
        <button class="btn04">删除广州节点</button></br>
        <button class="btn05">读取当前城市列表结构</button></br>
        <button class="btn06">读取北京内的节点</button>
    </div>
    <script>
        let box = document.querySelector('.box');
        let btn1 = document.querySelector('.btn1');
        let btn2 = document.querySelector('.btn2');
        let btn3 = document.querySelector('.btn3');
        let btn4 = document.querySelector('.btn4');
        let input = box.querySelectorAll('.inp');
        let all = box.querySelector('.all')
        

        btn1.onclick = function fn(){
            input.forEach(function(value){
                value.setAttribute('checked', 'checked');
            })
            all.setAttribute('checked', 'checked');
        }
        btn2.onclick = function fn(){
            input.forEach(function(value){
                value.removeAttribute('checked');
            })
            all.removeAttribute('checked');
        }
        btn3.onclick = function fn(){
            input.forEach(function(value){
                value.checked =!value.checked;
            })
        }
        btn4.onclick = function fn(){
            input.forEach(function(value){
                if(value.checked) {
                    console.log(value.value);
                }
            })
        }

        let btn01 = document.querySelector('.btn01');
        let btn02 = document.querySelector('.btn02');
        let btn03 = document.querySelector('.btn03');
        let btn04 = document.querySelector('.btn04');
        let btn05 = document.querySelector('.btn05');
        let btn06 = document.querySelector('.btn06');
        let ul = document.querySelector('ul');
        
        btn01.onclick = function(){
            let newLi = document.createElement('li');
            newLi.innerText = '广州';
            ul.append(newLi);
        }
        btn02.onclick = function(){
            let newLi = document.createElement('li');
            newLi.innerText = '广州';
            ul.insertBefore(newLi, ul.firstChild);
        }
        btn03.onclick = function(){
            let newLi = document.createElement('li');
            newLi.innerText = '广州';
            ul.replaceChild(newLi, ul.firstChild);
        }
        btn04.onclick = function(){
            ul.removeChild(ul.firstChild);
        }
        btn05.onclick = function(){
            console.log(ul.innerHTML);
        }
        btn06.onclick = function(){
            console.log(ul.childNodes);
        }
    </script>
</body>
</html>